<template>
  <div id="app">
    <img src="./assets/logo.png">

    <input type="text" v-model="p.text" @keydown.13="a(Object.assign({},p))" />
    <input type="button" value="add" @click="a(Object.assign({},p))" />
    <!--这里面每次操作都能在chrome vue插件的vuex检测到-->
    列表
    <ul>
      <li v-for="item in tl" :key="item.id">
        {{item.text}}
        <span @click="b(item)">删除</span>
      </li>
    </ul>
    <router-link to="/">home</router-link>
    <router-link to="/b">tsbbbbbsst</router-link>
    <router-view/>
  </div>
</template>

<script>
/**
 * mapGetters 和 react mapStateToProps
 * mapActions 和 react mapDispatchToProps
 */
import {mapGetters, mapActions} from 'vuex'
export default {
  name: 'App',
  computed: {
    // 从state取出tl
    ...mapGetters(['tl'])
  },
  methods: {
    // 从action中把a,b映射到到这里
    ...mapActions(['a', 'b'])
  },
  data () {
    return {
      p: {
        text: ''
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
